document.querySelector('span.username').innerHTML = localStorage.getItem('shuju')?JSON.parse(localStorage.getItem('shuju')).uname:''

function render(arr){
    let str = ''
    arr.forEach(item=>{
        let gender = item.gender?'女':'男'
        str += `
        <tr>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${gender}</td>
            <td>${item.group}</td>
            <td>${item.hope_salary}</td>
            <td>${item.salary}</td>
            <td>${item.province}</td>
            <td>
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
            </td>
        </tr>
`
    })
    document.querySelector('.list').innerHTML = str
}
const prov = document.querySelector(`select[name="province"]`)
const city = document.querySelector(`select[name="city"]`)
const area = document.querySelector(`select[name="area"]`)

function list(opt,res,n) {
    let str = `<option value="">--${opt}--</option>`
    res.data.list.forEach(item=>{
        str += `<option value="${item}">--${item}--</option>`
    })
    n.innerHTML = str
}

async function listRender() {
    const pRes = await axios({url:`/api/province`})
    list('省份',pRes,prov)
    prov.addEventListener('change',async function(){
        const cRes = await axios({url:`/api/city?pname=${prov.value}`})
        list('城市',cRes,city)
    })
    city.addEventListener('change',async function(){
        const aRes = await axios({url:`/api/area?pname=${prov.value}&cname=${city.value}`})
        list('地区',aRes,area)
    })
}

async function getStudents() {
    const res = await axios({url:'/students'})
    render(res.data.data)
}
getStudents()
//增
const modal = new bootstrap.Modal(document.querySelector('#modal'));
document.querySelector('.bi.bi-plus.bi-2x').addEventListener('click',function(){
    document.querySelector('.modal-title').innerHTML = '添加学员'
    modal.show();
    listRender();
    document.querySelector('#submit').addEventListener('click',function(e){
        e.preventDefault()
        const form = document.querySelector('#form')
        let data = serialize(form,{hash:true,empty:true})
        Object.keys(data).forEach(key=>{
            if(key === 'age' || key === 'gender' || key === 'hope_salary' || key === 'salary' || key === 'group'){data[key] = parseInt(data[key])}
        })
        axios({
            url:'/students',
            method:'POST',
            data
        }).then(res=>{
            pxmu.toast(res.data.message);
            modal.hide();
            form.reset();
            getStudents();
        }).catch(err=>pxmu.toast(err.response.data.message))
    })
})
//删 改
document.querySelector('.list').addEventListener('click',e=>{
    if(e.target.classList.contains('bi-trash')){
        axios({url:`/students/${e.target.dataset.id}`,method:'DELETE'})
        .then(res=>getStudents())
        .catch(err=>console.log(err))
    }
    if(e.target.classList.contains('bi-pen')){
        document.querySelector('.modal-title').innerHTML = '修改学员'
        axios({url:`/students/${e.target.dataset.id}`})
        .then(res=>{
            // console.log(res.data.data);
            const modal = new bootstrap.Modal(document.querySelector('#modal'));
            modal.show();
            Object.keys(res.data.data).forEach(key=>{
                if(key === 'name' || key === 'age' || key === 'gender' || key === 'hope_salary' || key === 'salary' || key === 'group'){document.querySelector(`[name="${key}"]`).value = res.data.data[key]}
                if(key === 'province' || key === 'city' || key === 'area'){document.querySelector(`[name="${key}"]`).innerHTML = `<option value="${res.data.data[key]}">--${res.data.data[key]}--</option>`}
            })
            const pRender = async function(){
                const pRes = await axios({url:`/api/province`})
                list('省份',pRes,prov)
                prov.removeEventListener('click',pRender)
                prov.addEventListener('change',async function(){
                    const cRes = await axios({url:`/api/city?pname=${prov.value}`})
                    list('城市',cRes,city)
                })
            }
            prov.addEventListener('click',pRender)
            const cRender = async function(){
                const cRes = await axios({url:`/api/city?pname=${prov.value}`})
                list('城市',cRes,city)
                city.removeEventListener('click',cRender)
                city.addEventListener('change',async function(){
                    const aRes = await axios({url:`/api/area?pname=${prov.value}&cname=${city.value}`})
                    list('地区',aRes,area)
                })
            }
            city.addEventListener('click',cRender)
            const aRender = async function(){
                const aRes = await axios({url:`/api/area?pname=${prov.value}&cname=${city.value}`})
                list('地区',aRes,area)
                area.removeEventListener('click',aRender)
            }
            area.addEventListener('click',aRender)
            document.querySelector('#submit').addEventListener('click',()=>{
                const form = document.querySelector('#form')
                let data = serialize(form,{hash:true,empty:true})
                Object.keys(data).forEach(key=>{
                    if(key === 'age' || key === 'gender' || key === 'hope_salary' || key === 'salary' || key === 'group'){data[key] = parseInt(data[key])}
                })  
                axios({url:`/students/${e.target.dataset.id}`,method:'PUT',data})
                .then(res=>{
                    pxmu.toast(res.data.message);
                    modal.hide();
                    form.reset();
                    getStudents();
                })
            })
        })
    }
})



